<!--  -->
<template>

  <div class='tab-box'>

    <!--工具条 查询-->
    <div>
      <el-form :inline="true"
               >
                <el-form-item>
        <el-button type="primary"
                     @click="goback">重置搜索</el-button>
        </el-form-item>
        <el-form-item >
          <el-input v-model="search"
                    placeholder="请输入搜索内容"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="Search">查询</el-button>
        </el-form-item>

      </el-form>
    </div>

    <!--列表-->
    <el-table ref="multipleTable"
              :data="outinfo.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              tooltip-effect="dark"
              style="width: 100%"
              height="400px"
              v-loading="loading"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
>
      <el-table-column prop="id"
                       label="序号"
                       width="60">
      </el-table-column>

      <el-table-column prop="part_get_people"
                       label="领用人"
                       width="100">
      </el-table-column>

      <el-table-column prop="part_get_time"
                       label="领用时间"
                       width="100">
      </el-table-column>

            <el-table-column prop="robot_parts"
                       label="零件"
                       width="600">
      </el-table-column>

      <el-table-column prop="others"
                       label="领用用途"
                       width="100">
      </el-table-column>
    </el-table>

    <div class="toolbar">
      <el-pagination 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10,20,50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="outinfo.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import { AllOutinfo} from "../../api/api.js";
import date from '../../utils/date.js';

export default {
  
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {

      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      loading: false,
      search: '',
      outinfo: [],
      sels: [],  //列表选中列

    };
  },

  created () {
    this.get_allout_info() ;
  },

  methods: {
        handleSizeChange:function(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        handleCurrentChange:function(val) {
            this.currentPage = val;
        },


      get_allout_info() {
      AllOutinfo().then(resp => {
        this.outinfo = resp.data
        console.log('Outinfo --->', resp.data);
       }).catch(error => {
        console.log(error);
      });
    },

    Search() {
      // search 是 v-model="search" 的 search
      var search = this.search;
      if (search) {
        this.outinfo = this.outinfo.filter(function(product) {
          // 每一项数据
          // console.log(product)
          return Object.keys(product).some(function(key) {
            // 每一项数据的参数名
            // console.log(key)
            return (
              String(product[key])
                // toLowerCase() 方法用于把字符串转换为小写。
                .toLowerCase()
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                .indexOf(search) > -1
            );
          });
        });
      }else{this.get_out_info();}
    },
    goback() {
      this.search='';
      this.get_out_info();
    },
  
  //生命周期 - 创建完成（可以访问当前this实例）
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // this.get_get_out_info();
  },

}
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.tab-box {
  background-color: #fff;
  padding: 20px;
}
.toolbar {
  margin-top: 10px;
}

.el-pagination {
    text-align: center; 
}
</style>